<template>
    <view>
        <!-- 头部 返回按钮 -->
        <PageHead backPath="/pages/user/index?p=3"></PageHead>
        <!-- 头部 返回按钮  end-->

        <view class="p-30">
            <!-- 活动列表 -->
            <Acard v-for="activity in activities" :key="activity.id" pad="12px" class="mb-10" bgFilter>
                <view class="flex flex-row flex-nowrap flex-justify-between flex-align-center">
                    <view class="text-line1">{{ activity.title }}</view>
                    <view class="nbg flex flex-align-center">
                        {{ activity.joined ? '参与过' : '未参与' }}
                        <view :class="[{ joined: activity.joined }, 'light-line']"></view>
                    </view>
                </view>
            </Acard>
            <!-- 加载更多 -->
            <u-loadmore :status="status" color="#40ffaf" line @loadmore="loadmore" />
            <!-- 加载更多 end-->
            <!-- 活动列表  end -->
        </view>

        <!-- 粒子背景 -->
        <ParticleBackground></ParticleBackground>
    </view>
</template>

<script>
import { mapState } from 'vuex';
import { nextTick } from "vue";
export default {
    name: 'HistoryActivity',
    data() {
        return {
            limit: 10, // 活动数
            status:'loading', // 加载更多 组件的状态
        };
    },
    mounted() {
        this.getActivities();
    },
    computed: {
        ...mapState('user', ['userinfo']),
        ...mapState('activity', ['activities', 'activityTotal'])
    },
    methods: {
        // 获取历史活动
        getActivities() {
            this.$store.dispatch('activity/getActivitiesHistory', {
                society_id: this.userinfo.society_id,
                pageNo: 1,
                limit: this.limit,
                user_id: this.userinfo.id
            });
            // 更新一下加载更多组件的状态
            this.$nextTick(()=>{
                console.log(this.limit,this.activityTotal);
                if(this.limit < this.activityTotal){
                    this.status = 'loadmore'
                }else{
                    this.status = 'nomore'
                }
            })
        },
        // 加载更多历史活动
        loadmore(){
            this.limit += 10;
            this.getActivities()
        }
    }
};
</script>

<style lang="scss">
.nbg {
    background: rgba(26, 26, 26, 0.5);
    overflow: hidden;
    clip-path: polygon(
        6px 0px,
        calc(100% - 6px) 0,
        100% 6px,
        100% calc(100% - 6px),
        calc(100% - 6px) 100%,
        6px 100%,
        0 calc(100% - 6px),
        0 6px
    );
    // height: 32px;
    box-sizing: border-box;
    padding: 5px 10px;
}
.light-line {
    margin-left: 10rpx;
    width: 6px;
    height: 20px;
    background: #d23223;
    border-radius: 3px;
    box-shadow: 0 0 10px rgb(210, 52, 24);
    animation: FpulseSlowBDanger infinite alternate 1s linear;
}
.joined {
    background: #9bd2bd !important;
    box-shadow: 0 0 10px rgb(155, 210, 189);
    animation: FpulseSlowB infinite alternate 1s linear;
}
</style>
